iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 25
0
自我挑戰組

自我挑戰日記系列 第 25

CSS:background-blend-mode 背景混合模式

  • 分享至 

  • xImage
  •  

大家好 /images/emoticon/emoticon37.gif

今天要作的是把2張圖像用混合模式作效果
資料來源 w3schools

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

https://www.w3schools.com/cssref/pr_background-blend-mode.asp

https://ithelp.ithome.com.tw/upload/images/20171230/20107496VNMt21SMkE.jpg
2張要混合的原圖

background-blend-mode: normal;

normal 為一般模式
看到的就是第一張圖像

background-blend-mode: multiply;

https://ithelp.ithome.com.tw/upload/images/20171230/20107496dZaznL3fiw.jpg
multiply 相乘模式
把二張圖像顏色相加
和下面的屏幕模式不一樣
相乘模式 會愈疊愈暗色

background-blend-mode: screen;

https://ithelp.ithome.com.tw/upload/images/20171230/20107496VPArtzLZmt.jpg
screen 屏幕模式
這是色光相加 顏色會愈加愈亮、淡色
另外用圖像加漸層看效果

background-image: url('01.jpg'), linear-gradient(to top, #0250c5 0%, #d43f8d 100%);

這比較看的出
會比變亮模式的顏色更亮
https://ithelp.ithome.com.tw/upload/images/20171230/20107496gnFRwcGPKA.jpg

background-blend-mode: overlay;

https://ithelp.ithome.com.tw/upload/images/20171230/2010749600XX8QATd0.jpg
overlay 覆蓋模式
2張圖的顏色除了相加、第一張圖像顏色會比較淡色

background-blend-mode: darken;

https://ithelp.ithome.com.tw/upload/images/20171230/20107496heGILiCBum.jpg
darken 變暗模式
和 相乘模式 很相像
但變暗模式並不會比相乘模式後更暗色
會是以第一張顏色為主的樣子

background-blend-mode: lighten;

https://ithelp.ithome.com.tw/upload/images/20171230/20107496jj7QhEYle9.jpg
lighten 變亮模式
https://ithelp.ithome.com.tw/upload/images/20171230/20107496q5EtClJEWg.jpg
類似 screen 屏幕模式

background-blend-mode: color-dodge;

https://ithelp.ithome.com.tw/upload/images/20171230/20107496Ld9CxFMvb3.jpg
color-dodge 顏色減淡模式
不管是圖像還是圖像加漸層
這模式接近 屏幕模式 後的淡化效果

https://ithelp.ithome.com.tw/upload/images/20171230/20107496Ja8eoglYkW.jpg

background-blend-mode: saturation;

https://ithelp.ithome.com.tw/upload/images/20171230/201074968q0nLXKo62.jpg
saturation 飽和模式
這模式類似再下一個的色相模式
不同的是顏色以第二張的顏色飽和度為主
https://ithelp.ithome.com.tw/upload/images/20171230/20107496RoWfU0dcrx.jpg

background-blend-mode: color;

https://ithelp.ithome.com.tw/upload/images/20171230/20107496qRQi3iyqbY.jpg
color 色相模式
這模式類似負片效果
以第一張圖作色相
用漸層的方式比就明顯
下圖的漸層是用 由下至上 https://ithelp.ithome.com.tw/upload/images/20171231/20107496Dypo0YNv6L.jpg
https://ithelp.ithome.com.tw/upload/images/20171230/20107496q3QAeI8AOc.jpg

background-blend-mode: luminosity;

https://ithelp.ithome.com.tw/upload/images/20171230/20107496DpuMIf46Iu.jpg
luminosity 明度模式
這模式會把第一張的顏色變灰階
再和第二張的顏色相加
上圖是因為第2張圖的顏色接近灰色
變成灰褐色
所以改成圖像加漸層
就是下圖的樣子
保留第一張圖像的灰階加上漸層
https://ithelp.ithome.com.tw/upload/images/20171230/20107496sC40EULOdZ.jpg

--- 明日待續。


上一篇
CSS:裁切圖片
下一篇
CSS:column 瀑布流版型
系列文
自我挑戰日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言